<template>
  <div class="container_edit">
    <div class="header">
      <p>房源管理>>办公室详情</p>
      <el-button
        type="primary"
        @click="back"
      >返回</el-button>
    </div>
    <div class="main">
      <el-form
        ref="user"
        label-width="150px"
        class=""
      >
        <el-form-item
          label="图片："
          prop="imageKey"
        >
          <div>
            <img :src="item.fileUrl" v-for="(item, index) in params.images" :key="index" style="width: 100px;margin-right: 10px;" alt="">
          </div>
        </el-form-item>
        <el-form-item
          label="写字楼名称："
          prop="buildingId"
        >
          <div>{{params.buildingName}}</div>
        </el-form-item>
        <el-form-item
          label="办公室名称"
          prop="name"
        >
          {{params.name}}
        </el-form-item>
        <el-form-item
          label="空间"
          prop="degree"
        >
          {{degreeList.filter(item => {return item.value == params.degree}).length ? degreeList.filter(item => {return item.value == params.degree})[0].label : ''}}
        </el-form-item>
        <div class="flex-box-align">
          <el-form-item
            label="单价"
            prop="unitPrice"
          >
            {{params.unitPrice}}元/m2
          </el-form-item>
          <el-form-item
            label="总价"
            prop="totalPrice"
          >
            {{params.totalPrice}}元/月
          </el-form-item>
        </div>
        <!--<el-form-item-->
          <!--label="简述"-->
          <!--prop="brief"-->
        <!--&gt;-->
          <!--{{params.brief}}-->
        <!--</el-form-item>-->
        <el-form-item
          label="标签"
          prop="tags"
        >
          <div class="flex-box-align">
            <div v-for="(item, index) in params.tags" :key="index">{{item.name}}</div>
          </div>
        </el-form-item>
        <div class="sub_title">配套介绍</div>
        <el-form-item
          label="房号"
          prop="roomNo"
        >
          {{params.roomNo}}
        </el-form-item>
        <el-form-item
          label="面积"
          prop="area"
        >
          {{params.area}}m2
        </el-form-item>
        <el-form-item
          label="格局"
          prop="structure"
        >
          {{params.structure}}
        </el-form-item>
        <el-form-item
          label="朝向"
          prop="face"
        >
          {{params.face}}
        </el-form-item>
        <el-form-item
          label="工位"
          prop="seat"
        >
          {{params.seatMin}} ~ {{params.seatMax}}个
        </el-form-item>
        <el-form-item
          label="装修情况"
          prop="decoration"
        >
          {{params.decoration}}
        </el-form-item>
        <el-form-item
          label="管理费"
          prop="managementFee"
        >
          {{params.managementFee}}元/m2
        </el-form-item>
        <el-form-item
          label="空调费"
          prop="airConditionerFee"
        >
          {{params.airConditionerFee}}
        </el-form-item>
        <el-form-item
          label="房源介绍"
          prop="introduce"
        >
          {{params.introduce}}
        </el-form-item>
        <el-form-item
          label="房源视频"
          prop="videoKey"
        >
          <Video :src="params.videoUrl" controls style="width: 150px;"></Video>
        </el-form-item>
        <el-form-item
          label="地址"
          prop="detailAddress"
        >
          <div>{{params.detailAddress}}</div>
        </el-form-item>
        <el-form-item
          label=""
          prop=""
        >
          <div id="map_canvas"></div>
        </el-form-item>
        <el-form-item>
          <el-button @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  var searchService,map,markers = [];
  export default {
    data() {
      return {
        upLoadUrl: "",
        imageUrl: "",
        videoUrl: "",
        params: {
          airConditionerFee: "",
          airConditionerUnit: "",
          area: "",
          brief: "",
          buildingId: "",
          decoration: "",
          degree: "",
          face: "",
          imageKey: "",
          introduce: "",
          managementFee: "",
          name: "",
          roomNo: "",
          seatMin: "",
          seatMax: '',
          structure: "",
          tags: [],
          totalPrice: "",
          unitPrice: "",
          videoKey: "",
          id: "",
          detailAddress: "",
        },
        fileList: [],
        rules: {
          airConditionerFee: [
            { required: true, message: "请输入空调费", trigger: "blur" }
          ],
          area: [
            { required: true, message: "请输入面积", trigger: "blur" }
          ],
          brief: [
            { required: true, message: "请输入简述", trigger: "blur" }
          ],
          buildingId: [
            { required: true, message: "请选择写字楼", trigger: "blur" }
          ],
          decoration: [
            { required: true, message: "请输入装修情况", trigger: "blur" }
          ],
          degree: [
            { required: true, message: "请选择空间", trigger: "blur" }
          ],
          face: [
            { required: true, message: "请输入朝向", trigger: "blur" }
          ],
          imageKey: [
            { required: true, message: "请上传图片", trigger: "blur" }
          ],
          introduce: [
            { required: true, message: "请输入房源介绍", trigger: "blur" }
          ],
          managementFee: [
            { required: true, message: "请输入管理费", trigger: "blur" }
          ],
          name: [
            { required: true, message: "请输入办公室名称", trigger: "blur" }
          ],
          roomNo: [
            { required: true, message: "请输入房号", trigger: "blur" }
          ],
          seat: [
            { required: true, message: "请输入工位", trigger: "blur" }
          ],
          structure: [
            { required: true, message: "请输入格局", trigger: "blur" }
          ],
          tags: [
            { required: true, message: "请输入标签", trigger: "blur" }
          ],
          totalPrice: [
            { required: true, message: "请输入总价", trigger: "blur" }
          ],
          unitPrice: [
            { required: true, message: "请输入单价", trigger: "blur" }
          ],
          videoKey: [
            { required: true, message: "请上传房源视频", trigger: "blur" }
          ]
        },
        inputVisible: false,
        inputValue: '',
        buildingList: [],
        degreeList: [{
          label: "经济",
          value: "ECONOMY"
        },{
          label: "舒适",
          value: "COMFORT"
        },{
          label: "高端",
          value: "HIGHEND"
        }]
      };
    },
    created() {
    },
    mounted() {
      this.id = this.$route.query.id
      if (this.id) {
        this.getInfo();
      }
      this.init()
    },
    components: {
      "bg-editor": () => import("../common/bg-editor.vue")
    },
    methods: {
      getInfo: function() {
        let url = CONSTANT.URL.ROOM.detail;
        common.get(url,this.id, res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            this.params = data;
            this.searchKeyword()
          }
        });
      },
      getList() {
        let url = CONSTANT.URL.BUILDING.box;
        common.get(url,'', res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            this.buildingList = data;
          }
        });
      },
      handleSave: function(formName) {
        this.params.imageKey = ""
        this.fileList.map( item => {
          this.params.imageKey = item.fileKey+","+this.params.imageKey
        })
        this.$refs[formName].validate(valid => {
          if (valid) {
            let url = CONSTANT.URL.ROOM.save;
            common.requestAjax(url, JSON.stringify(this.params), '', res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "保存成功！"
                });
                this.$router.back()
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.errMsg
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      beforeAvatarUpload(file) {
        let url = CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS;
        let param = {
          suffix: file.name.split(".")[1], // 文件后缀  png
          contentType: file.type // 文件类型  image/png
        };
        common.requestAjax(url, '', param, res => {
          this.upLoadUrl = res.data.bussData.uploadUrl;
//          this.params.imageKey += res.data.bussData.fileKey+',';
          console.log(this.params.imageKey)
          common.uploadFile(this.upLoadUrl, file, file.type, res1 => {
            this.fileList.push({
              url: res.data.bussData.downloadUrl,
              fileKey: res.data.bussData.fileKey,
            })
          })
        });
      },
      handleImageRemove() {

      },
      beforeVideoUpload(file) {
        let url = CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS;
        let param = {
          suffix: file.name.split(".")[1], // 文件后缀  png
          contentType: file.type // 文件类型  image/png
        };
        common.requestAjax(url, '', param, res => {
          this.upLoadUrl = res.data.bussData.uploadUrl;
          this.params.videoKey = res.data.bussData.fileKey;
          common.uploadFile(this.upLoadUrl, file, file.type, res1 => {
            this.videoUrl = res.data.bussData.downloadUrl;
          })
        });
      },
      editorInfo(e) {
        this.params.introduce = e
        console.log(this.params.introduce)
      },
      back() {
        this.$router.back();
      },
      handleClose(tag) {
        this.params.tags.splice(this.params.tags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.params.tags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      http(){},
      init() {
        let self = this
        var center = new qq.maps.LatLng(39.916527,116.397128);
        map = new qq.maps.Map(document.getElementById('map_canvas'),{
          center: center,
          zoom: 13
        });
        var latlngBounds = new qq.maps.LatLngBounds();
        //调用Poi检索类
        searchService = new qq.maps.SearchService({
          pageIndex: 1,
          pageCapacity: 1,
          complete: function(results){
            self.params.latitude = results.detail.pois[0].latLng.lat
            self.params.longitude = results.detail.pois[0].latLng.lng
            console.log(results.detail)
            var pois = results.detail.pois;
            for(var i = 0,l = pois.length;i < l; i++){
              var poi = pois[i];
              latlngBounds.extend(poi.latLng);
              var marker = new qq.maps.Marker({
                map:map,
                position: poi.latLng
              });

              marker.setTitle(i+1);

              markers.push(marker);
            }
            map.fitBounds(latlngBounds);
          }
        });
      },
      clearOverlays(overlays){
        var overlay;
        while(overlay = overlays.pop()){
          overlay.setMap(null);
        }
      },
      searchKeyword(e) {
        console.log(e)
//        var keyword = document.getElementById("keyword").value;
//        var region = document.getElementById("region").value;
        this.clearOverlays(markers);
//        searchService.setLocation(region);
        searchService.search(this.params.detailAddress);
      }
    }
  };
</script>
<style lang="scss" scoped>
  #map_canvas {
    width:500px;
    height:500px;
  }
  .table-content {
    width: 500px;
    .table-item {
      position: relative;
      border: 1px solid #dcdfe6;
      i {
        position: absolute;
        right: -30px;
        top: 20px;
        cursor: pointer;
        font-size: 16px;
      }
      &:first-child {
        background-color: #409eff;
        color: #fff;
        border-right: 0px solid #dcdfe6;
        .table-list {
          padding: 0;
        }
      }

      .table-list {
        flex: 2;
        text-align: center;
        padding: 5px 0;
        .el-input {
          height: 70% !important;
          width: 90%;
        }
        &:first-child {
          flex: 3;
          border-right: 1px solid #dcdfe6;
        }
      }
    }
  }
</style>
